<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="./css/base.css">
	<style>
		.content .item {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.content .item img {
			width: 100%;
			height: 100%;
			box-shadow: 0px 0px 10px #ccc;

		}

		.content .item .title:hover {
			text-decoration: underline;
			cursor: pointer;
		}


		.content .item div:first-child:hover img {
			opacity: 0.7;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.content .item .intro {
			margin-top: 10px;
			color: #ccc;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#" style="display:flex;">
						Allen的博客
					</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">首页</a></li>
						<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
									aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
								<ul class="dropdown-menu">
								
								</ul>
							</li>
						<li><a href="/tags.html">标签</a></li>
						<li><a href="/about.html">关于我</a></li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>

		<div class="content">
			<h4>最新文章</h4>
			<div class="artlist">
	
			</div>
		</div>
		<button type="button" class="btn  btn-block more">查看更多</button>
		<hr>

		<div class="footer" style="text-align:center;font-size: 14px; color: #999;margin:10px 0;">
			首页 | 主站 | GitHub | created at 2020/02/4 | Powered by 汪玮
		</div>
	</div>
</body>
<script src="./js/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script>
let page=1;
let pagesize=3;
let uncontent=false
let imgs;
	//发送请求 获取文章列表
	function loadArticle(page,pagesize){
		return $.ajax({
			url:'http://127.0.0.1:3200/api/article',
			data:{page,pagesize},
		})
	}
	//发送请求获取 分类列表
	function loadcate(){
		return $.get('http://127.0.0.1:3200/api/cate')
	}

//获取初始内容
	async function initDate(page,pagesize){
		let pro1=loadArticle(page,pagesize);
		let pro2
		let getcate=localStorage.getItem("cate")
		getcate ?   getcate=JSON.parse( getcate) : pro2=loadcate();
		// console.log( "转化的",result)
		let data=await Promise.all([pro1,pro2])	
		data[1] ?   localStorage.setItem('cate', JSON.stringify(data[1])):data[1]=getcate
		$(".dropdown-menu").html(renderCate(data[1]))
		$(".artlist").html(renderArt(data[0].result))
		imgs=document.querySelectorAll('img')
		scrollHandle(imgs)
	}


	initDate(page,pagesize)
	//渲染分类
	function renderCate(data){
		catacontent="";
		data.forEach(item => {
			catacontent +=`	<li><a href="/cate.html?id=${item.article_id}">${item.classify}</a></li>` 
		});

		return catacontent
	}
	//渲染文章页面
	function renderArt(data){
		console.log(data)
		artcontent="";

		data.forEach(item =>{
					
			item.img_url ?   item.img_url ="http://127.0.0.1:3200/"+item.img_url : item.img_url="http://placehold.it/170x100/ff3333/ffffff?text=like%20you"
			item.classify ? item.classify : item.classify ="未分类"
			artcontent += `<div class='item row'>
					<div class="col-md-2">
						<img data-src="${item.img_url}" alt="">
					</div>
					<div class="col-md-10">
						<div class="date ">作者：${item.author} 、 ${item.add_time.slice(0,10) } 、分类：<a href="/cate.html?id=${item.classify2}"> ${item.classify} </a></div>
						<a href='/detail.html?id=${item.art_id}'><div class="title">${item.title}</div></a>
						<div class="intro">${item.content}</div>
					</div>
					<hr>
				</div>`
		})
		return artcontent
	}
	//获取更多文章
	$(".more").click(async function (){
		if(uncontent){
			$(this).html("内容已加载完毕").prop("distable",true)
			return
		}
		page++;
		let res = await loadArticle(page,pagesize)
		if(res.result.length<pagesize){
			$(this).html("内容已加载完毕").prop("distable",true)
			uncontent=true
		}

		let oleAtrcontent=$(".artlist").html()
		let newAtrcontent=renderArt(res.result)
		$(".artlist").html(oleAtrcontent+newAtrcontent)
		imgs=document.querySelectorAll('img')
		scrollHandle(imgs)

	})
	window.onscroll=function(){
		scrollHandle(imgs)
	}
        //图片懒加载
        function scrollHandle(imgs){
		// let pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop  //向上卷的长度
		let viewportHeight = window.innerHeight || document.documentElement.clientHeight;  //视口高度
		imgs.forEach( img =>{
			
			let {top} =img.getBoundingClientRect();
							
			if( top>0 &&  top < viewportHeight ){
			
				if(img.getAttribute('loader')  !== 'done'){
				let src =img.getAttribute( 'data-src')
				img.src=src
				img.setAttribute('loader','done')
				}
			
			}
		})
	}

</script>
</html>